<!-- 视频评论组件 -->
<template>
  <v-card variant="outlined" rounded="lg" class="mt-4">
    <v-container>
      <v-row>
        <v-col>
          <div class="d-flex align-center mb-3">
            <h2 class="text-h5 font-weight-medium">{{ commentCount }} 条评论</h2>
            <v-spacer></v-spacer>
          </div>
        </v-col>
      </v-row>

      <!-- 评论输入框 -->
      <v-row>
        <v-col>
          <v-card variant="outlined" rounded="lg" class="pa-3 mb-4 comment-editor">
            <div class="d-flex mb-3">
              <v-avatar size="40" class="mr-3">
                <v-img 
                  :src="userInfo.userData ? userInfo.userData.avatarUrl : '/favicon.png'" 
                  alt="用户头像"
                ></v-img>
              </v-avatar>
              <div class="flex-grow-1">
                <Vditor 
                  ref="commentVditor" 
                  :height="120" 
                  @vditor-input="getCommentText" 
                  :placeholder="userInfo.userData ? '发一条友善的评论' : '登录后才能发表评论'"
                />
              </div>
            </div>
            <div class="d-flex justify-end">
              <v-btn 
                color="primary" 
                rounded="lg"
                @click="submitComment"
                :disabled="!userInfo.userData"
              >
                发表评论
              </v-btn>
            </div>
          </v-card>
        </v-col>
      </v-row>

      <v-divider class="mb-3"></v-divider>

      <!-- 排序标签 -->
      <v-row class="mb-3">
        <v-col>
          <v-tabs 
            v-model="activeTab" 
            color="primary" 
            bg-color="transparent"
            density="comfortable"
          >
            <v-tab value="1" @click="setType(1)">时间倒序</v-tab>
            <v-tab value="2">最多点赞</v-tab>
            <v-tab value="3" @click="setType(3)">最多评论</v-tab>
          </v-tabs>
        </v-col>
      </v-row>

      <v-divider class="mb-4"></v-divider>

      <!-- 无评论状态 -->
      <v-row v-if="total == 0" justify="center" class="my-8">
        <div class="text-center">
          <v-icon
            icon="mdi-message-text-outline"
            size="x-large"
            color="grey-lighten-1"
            class="mb-2"
          ></v-icon>
          <p class="text-grey-lighten-1 text-body-1">暂无评论，快来抢沙发吧！</p>
        </div>
      </v-row>

      <!-- 评论列表 -->
      <template v-else>
        <v-row 
          v-for="(item, index) in commentsList" 
          :key="item.id"
          :class="index < commentsList.length - 1 ? 'comment-item' : ''"
        >
          <v-col>
            <CommentCard :author-id="authorId" :comment="item" />
          </v-col>
        </v-row>
      </template>

      <!-- 分页 -->
      <v-row justify="center" class="my-6" v-if="length > 1">
        <v-pagination
          v-model="page"
          rounded="circle"
          :length="length"
          color="primary"
          :total-visible="7"
          @update:model-value="pageChange"
        />
      </v-row>
    </v-container>

    <!-- 提示消息 -->
    <v-snackbar v-model="showMessage" location="top" :timeout="3000" :color="messageColor">
      {{ message }}
      <template v-slot:actions>
        <v-btn variant="text" @click="showMessage = false">关闭</v-btn>
      </template>
    </v-snackbar>
  </v-card>
</template>
  
<script>
import Vditor from '@/components/vditor/VditorComponents.vue'
import CommentCard from '@/components/card/comment/CommentCard.vue'
import { useUserStore } from '@/stores/userStore'
export default {
  name: 'VideoComment',
  components: {
    Vditor,
    CommentCard,
  },
  props: {
    count: {
      type: Number,
      default: 0,
    },
    article: {
      type: Number,
      default: 0,
    },
    authorId: {
      type: Number,
      default: 0,
    },
    typenum: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      commentCount: this.count,
      activeTab: '1',
      commentData: {
        articleId: this.article,
        comment: '',
        type: this.typenum,
        parentCommentId: 0,
      },
      showMessage: false,
      message: '',
      messageColor: 'info',
      commentsList: [],
      page: 1,
      total: 0,
      length: 15,
      type: 0,
      sort: 1,
      size: 15,
      userInfo: useUserStore(),
    }
  },
  created() {
    this.getCommentList()
  },
  methods: {
    getCommentList() {
      this.httpGet(
        `/comment/list?article=${this.article}&type=1&sort=${this.sort}&page=${this.page}&limit=${this.size}`,
        (json) => {
          this.commentsList = json.data.list
          this.page = json.data.currPage
          this.length = json.data.totalPage
          this.total = json.data.totalCount
        }
      )
    },
    getCommentText(value) {
      this.commentData.comment = value
    },
    submitComment() {
      if (this.userInfo.userData == null) {
        this.message = '请先登录后再评论！'
        this.messageColor = 'warning'
        this.showMessage = true
        return
      }
      if (
        this.commentData.comment === '' ||
        this.commentData.comment == null ||
        this.commentData.comment === '\n'
      ) {
        this.message = '评论内容不能为空！'
        this.messageColor = 'warning'
        this.showMessage = true
        return
      }
      this.httpPost('/comment/save', this.commentData, (json) => {
        if (json.status === 200) {
          this.message = '评论发表成功'
          this.messageColor = 'success'
          this.showMessage = true
          this.commentData.comment = ''
          this.$refs.commentVditor.setTextValue('')
          this.getCommentList()
        } else {
          this.message = json.message
          this.messageColor = 'error'
          this.showMessage = true
        }
      })
    },
    pageChange(page) {
      this.page = page
      this.getCommentList()
    },
    setType(value) {
      this.sort = value
      this.activeTab = value.toString()
      this.getCommentList()
    },
  },
}
</script>
  
<style>
.comment-editor {
  background-color: rgba(0, 0, 0, 0.01) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.comment-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  padding-bottom: 12px;
}
</style>
  